<template>
	<view class="iconlist">
		<view class="iconflex">
			<view class="flexitem" v-for="(i,e) in list":key='e+Date.now()'>
				<image :src="i.url" mode="aspectFit" class="image"></image>
				<span>{{i.title}}</span>
			</view>
		</view>
	</view>
</template>
<script setup>
	const props=defineProps({
			
		list:{
			type:Array,
			default:()=>[]
		}
	})

</script>

<style lang="scss" seocp>
	.iconlist{
		background: #FFFFFF;
		border-radius: 20px;
		width: 100%;
		min-height: 150rpx;
		font-size: 25rpx;
		
		color: black;
		margin: 20rpx 0;
		.iconflex{
		   display: grid;
		            grid-template-columns: repeat(4, 23%); /* 每行4个元素，宽度23% */
		          gap: 1%;  /* 每个元素之间有1%的间隙 */
			.flexitem{
				border-radius: 20px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.image{
					height: 100rpx;
					width: 100%;
				}
				&:active{
					background-color: #FAFAFA;
				}
			}
			
		}
	}
</style>